<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-icon {
        cursor: pointer;
    }

    .copy {
        margin-right: 3px;
        font-weight: bold
    }

    .layui-table-cell {
        height: auto;
        line-height: 30px;
        text-align: left;

    }

    .btn_group {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn_group a {
        margin-bottom: 5px;
        margin-left: 0 !important;
    }

    /* .ellipsis2{
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    } */
    .break {
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
    }

    .layui-input-block {
        margin-left: 100px;
    }

    .layui-layer-page .layui-layer-content {
        overflow: visible;
    }

    .batch .layui-input-block {
        margin-left: 110px;
    }
</style>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">短剧推广</a>
            <a><cite>推广链接</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-tab" lay-filter="changeType">
            <ul class="layui-tab-title" style="margin-bottom: 10px;">
                <li class="layui-this">全部</li>
                <li>收藏</li>
            </ul>
        </div>
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">投放媒体：</label>
                    <div id="pMedia" style="width:100%;flex:1"></div>
                </div>
                <div class="layui-inline" id="pitcher" style="display: none;">
                    <label class="layui-form-label w-auto">选择投手：</label>
                    <div id="pPitcher" style="width:100%;flex:1"></div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label w-auto">链接ID：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" placeholder="请输入链接ID" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">广告账号ID：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="advertiser_id" placeholder="请输入广告账号ID" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">选择短剧：</label>
                    <div id="pMenu" style="width:100%;flex:1"></div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label w-auto">添加时间：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="created_at" id="start_date" placeholder="选择时间">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">备注：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="remark" placeholder="请输入备注" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </div>
        <table id="link" lay-filter="link" lay-data="{skin:'row', size:'lg'}"></table>
    </div>
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <!-- <button class="layui-btn layui-btn-sm" lay-event="recharge">批量设置充值模板</button> -->
            <!-- <button class="layui-btn layui-btn-sm" lay-event="collect">批量设置收费</button> -->
            <button class="layui-btn layui-btn-sm" lay-event="custom_recharge">批量收费设置（只能修改新版链接）</button>
            <button class="layui-btn layui-btn-sm" lay-event="batchUpdateSet">批量修改回传配置</button>
            <button class="layui-btn layui-btn-sm" id="batchExportLink" lay-event="batchExportLink">批量导出</button>
            <button class="layui-btn layui-btn-sm" id="batchClose" lay-event="batchClose">批量关闭</button>
        </div>
    </script>
    <script type="text/html" id="tbBar">
        <div class="btn_group">
            {{#  if(d.link_switch !== 1 ){ }}
                <a class="layui-btn layui-btn-xs" lay-event="link_switch">开启</a>
            {{#  } else { }}
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="link_switch">关闭</a>
            {{#  } }}
            {{#  if(d.is_collection !== 1 ){ }}
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="collection">收藏</a>
            {{#  } else { }}
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="collection">取消收藏</a>
            {{#  } }}
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
            
        </div>
    </script>
    <script type="text/html" id="statistics">
        {{#  
            let common = `
            <div class="btn_group">
                <a class="layui-btn layui-btn-xs" lay-event="detail">订单详情</a>
                <a class="layui-btn layui-btn-xs"lay-event="history">历史数据</a>
                <a class="layui-btn layui-btn-xs"lay-event="LTV">LTV统计</a>
            </div>`;
            if(is_branch_office_manage !== 1){
                if(d.is_distributor != 1){
                    return common
                }else{
                    return `
                    <div class="btn_group">
                        <a class="layui-btn layui-btn-xs" lay-event="detail">订单详情</a>
                        <a class="layui-btn layui-btn-xs"lay-event="LTV">LTV统计</a>
                    </div>
                    `
                }
            }else{
                return common
            }
        }}
    </script>

    <script type="text/html" id="echo_rate">
        {{d.echo_rate}} <a lay-event="edithuichuang" class="layui-table-link" target="_blank"><i style="font-weight: bold;margin-left: 3px;" class="layui-icon layui-icon-edit"></i></a>
      </script>
    <script>
        let params = {
            elem: '#link'
            , url: '/cps/link/list' //数据接口
            , id: 'link'
            , page: true
            , limit: 10
            , toolbar: '#toolbar'
            , height: 'full-210'
            , cols: [[ //表头
                { type: 'checkbox' }
                , { field: 'id', title: 'ID', width: 70, sort: true, align: 'center' }
                , {
                    title: '地址', templet: function (d) {
                        if (d.link_type == 2) {
                            return `
                             <div class='ellipsis2'><font color="red">【${d.link_type_text}】</font>投放链接：</div><div><i class="layui-icon layui-icon-file-b copy" onclick="copyContent(this)" data-value='${d.douyin_link}'></i>${d.douyin_link}</div>
                             <div class='ellipsis2'>备用链接：</div><div><i class="layui-icon layui-icon-file-b copy" onclick="copyContent(this)" data-value='${d.external_link}'></i>${d.external_link}</div>
                            `;
                        } else {
                            return `
                            <div class='ellipsis2'>【${d.media_id == 6 ? 'H5地址' : '小程序地址'}}】${d.media_id == 6 ? '短信H5' : '小程序地址'}：</div><div><i class="layui-icon layui-icon-file-b copy" onclick="copyContent(this)" data-value='${d.url}'></i>${d.url}</div>
                            <div class='ellipsis2'>【${d.media_id == 6 ? '短信H5' : '小程序地址'}】投放链接：</div><div><i class="layui-icon layui-icon-file-b copy" onclick="copyContent(this)" data-value='${d.external_link}'></i>${d.external_link}</div>
                            `;
                        }
                    }, align: 'center'
                }
                , {
                    title: '推广链接信息', width: 290, templet: function (d) {
                        return `
                            <div class='break'>短剧名称：${d.video_name} <span class="layui-badge layui-bg-green">第${d.sort}集</span></div>
                            ${d.responsibility_person_name ? `<div>投手名称：${d.responsibility_person_name}</div>` : ''}
                            <div>投放媒体：${d.media_name}</div>
                            <div>备注：${d.remark}</div>
                            <div>创建时间：${dayjsFormat(d.created_at)}</div>
                        `;
                    }, align: 'center'
                }
                , {
                    title: '设置', width: 250, templet: function (d) {
                        return `
                        <div class='break'>充值模板：${d.recharge_template_name}</div>
                        <div class='break'>回传规则：${d.design_switch == 1 ? '指定金额回传' : d.echo_rule_config_name}</div>
                        <div class='break'>收费设置：${d.video_pay_setting_name}</div>
                        <div class='break'>广告账号ID：${d.advertiser_id}</div>
                    `;
                    }, align: 'center'
                }
                , { field: 'rebate', title: '返点值', width: 75, align: 'center' }
                //, {
                  //  field: 'echo_rate', title: '回传率', templet: '#echo_rate', width: 100, align: 'center'
                //}
                , {
                    title: '回传开关', width: 100, templet: function (d) {
                        return d.is_open == 1 ? '开启' : '关闭'
                    }, align: 'center'
                }
                , {
                    title: '今日用户数据', width: 145, templet: function (d) {
                        return `
                            <div>充值人数：${d.recharge_user_num}</div>
                            <div>充值笔数：${d.today_recharge_num}</div>
                            <div>总充值金额：${d.today_recharge_price}</div>
                        `;
                    }, align: 'center'
                }
                , {
                    title: '今日激活用户数据', width: 155, templet: function (d) {
                        return `
                            <div>充值人数：${d.new_user_recharge_num}</div>
                            <div>激活用户数：${d.register_user_num}</div>
                            <div>充值笔数：${d.new_user_recharge_number}</div>
                            <div>充值金额：${d.new_user_recharge_price}</div>
                        `;
                    }, align: 'center'
                }
                , {
                    title: '历史数据', width: 185, templet: function (d) {
                        return `
                            <div>累计充值金额：${d.recharge_price}</div>
                            <div>累计花费：${d.total_cost}</div>
                            <div>3日内人均贡献：${d.per_capita_contribution_within_5_days}</div>
                            <div>历史人均贡献：${d.history_per_capita_contribution}</div>
                        `;
                    }, align: 'center'
                }
                , { toolbar: '#tbBar', title: '操作', width: 60, align: 'center' }
                , { toolbar: '#statistics', title: '统计', width: 70, align: 'center' }
            ]]
        }
        tableList(params)

        let selectMedia = {
            url: '/cps/link/getLaunchMedia',
            selected: [],
            tips: '选择媒体',
            name: 'media_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pMedia'
        }
        selectN(selectMedia)

        let pitcher = {
            url: '/cps/pitcher/select',
            selected: [],
            tips: '选择投手',
            name: 'responsibility_person_id',
            field_id: 'responsibility_person_id',
            field_Name: 'responsibility_person_name',
            elem: '#pPitcher'
        }
        selectN(pitcher)
        let selectRecharge = {
            url: '/cps/recharge/select',
            selected: [],
            tips: '选择充值模板',
            name: 'recharge_template_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pRecharge'
        }
        let paySelect = {
            url: '/cps/video/paySelect',
            selected: [],
            tips: '选择收费设置',
            name: 'video_pay_setting_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#paySelect'
        }
        let customRechargeTemplate = {
            url: '/cps/customRechargeTemplate/select',
            selected: [],
            tips: '选择收费设置',
            name: 'custom_recharge_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#customRechargeTemplate'
        }

        layui.use(['table', "form", "layer", 'element', 'laydate'], function () {
            var table = layui.table;
            var element = layui.element;
            table.on('toolbar(link)', function (obj) {
                var event = obj.event;
                var checkStatus = table.checkStatus('link')
                let linkID = [], videoID = []
                checkStatus.data.forEach(item => {
                    linkID.push(item.id)
                    videoID.push(item.video_id)
                })
                let rechargeTemplate = `
                    <div class="x-body batch" >
                        <form class="layui-form" lay-filter="rechargeTemplate">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>选择模板
                                </label>
                                <div id="pRecharge" style="width:300px;flex:1"></div>
                            </div>
                            <button id="submitTemplate" class="layui-btn" lay-submit lay-filter="submitTemplate" style="display: none;" />
                        </form>
                    </div>
                `
                let paySelectTemplate = `
                    <div class="x-body batch" >
                        <form class="layui-form" lay-filter="paySelectTemplate">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>收费设置
                                </label>
                                <div id="paySelect" style="width:300px;flex:1"></div>
                            </div>
                            <button id="submitTemplate" class="layui-btn" lay-submit lay-filter="submitTemplate" style="display: none;" />
                            
                        </form>
                    </div>
                `
                let pcustomRechargeTemplate = `
                    <div class="x-body batch" >
                        <form class="layui-form" lay-filter="pcustomRechargeTemplate">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>收费设置
                                </label>
                                <div id="customRechargeTemplate" style="width:300px;flex:1"></div>
                            </div>
                            <button id="submitTemplate" class="layui-btn" lay-submit lay-filter="submitTemplate" style="display: none;" />
                            
                        </form>
                    </div>
                `
                if (checkStatus.data.length === 0) {
                    layer.msg('请选择后再操作', { icon: 5, time: 1000 });
                } else {
                    if (event === 'recharge') {
                        layerOpen({
                            type: 1,
                            title: '批量设置充值模板',
                            content: rechargeTemplate,
                            formTemplateName: 'rechargeTemplate',
                            tableName: 'link',
                            success: function () {
                                selectN(selectRecharge)
                            },
                            yes: function (data, layMask) {
                                return new Promise((resolve) => {
                                    Ajax('/cps/recharge/batchSetTemplate', {
                                        link_ids: linkID.toString(),
                                        recharge_template_id: data.recharge_template_id
                                    }).then(result => {
                                        resolve()
                                    });
                                })

                            }
                        })
                    } else if (event === 'collect') {
                        let firstVideoId = videoID[0];
                        for (var i = 0; i < videoID.length; i++) {
                            if (firstVideoId != videoID[i]) {
                                layer.msg('请选择同一部短剧的链接~', { icon: 5, time: 1500 });
                                return;
                            }
                        }
                        layerOpen({
                            type: 1,
                            title: '批量设置收费',
                            content: paySelectTemplate,
                            formTemplateName: 'paySelectTemplate',
                            tableName: 'link',
                            success: function () {
                                paySelect.url = `/cps/video/paySelect?video_id=${firstVideoId}`
                                selectN(paySelect)
                            },
                            yes: function (data, layMask) {
                                return new Promise((resolve) => {
                                    Ajax('/cps/video/batchSettingPay', {
                                        link_ids: linkID.toString(),
                                        video_pay_setting_id: data.video_pay_setting_id
                                    }).then(result => {
                                        resolve()
                                    });
                                })

                            }
                        })
                    } else if (event === 'batchUpdateSet') {
                        x_admin_show('批量修改回传配置', `../back/batchSet.html?link_ids=${linkID.toString()}`, 700, 600);
                    } else if (event === 'batchExportLink') { // 批量导出记录.
                        derive('/cps/link/batchExportLink', 'link_ids=' + linkID.toString())
                    } else if (event === 'batchClose') { // 批量导出记录.
                        console.log(event);
                        // derive('/cps/link/batchClose','link_ids='+linkID.toString()) 
                        ChangeAjax('/cps/link/batchClose', {
                            link_ids: linkID.toString()
                        }, 'link')
                    } else if (event === 'custom_recharge') {
                        let firstVideoId = videoID[0];
                        for (var i = 0; i < videoID.length; i++) {
                            if (firstVideoId != videoID[i]) {
                                layer.msg('请选择同一部短剧的链接~', { icon: 5, time: 1500 });
                                return;
                            }
                        }
                        layerOpen({
                            type: 1,
                            title: '批量收费设置',
                            content: pcustomRechargeTemplate,
                            formTemplateName: 'pcustomRechargeTemplate',
                            tableName: 'link',
                            success: function () {
                                customRechargeTemplate.url = `/cps/customRechargeTemplate/select?video_id=${firstVideoId}`
                                selectN(customRechargeTemplate)
                            },
                            yes: function (data, layMask) {
                                return new Promise((resolve) => {
                                    Ajax('/cps/customRechargeTemplate/batchRechargeSetting', {
                                        link_ids: linkID.toString(),
                                        custom_recharge_id: data.custom_recharge_id
                                    }).then(result => {
                                        if(result.code == 200){
                                            layer.msg('操作成功', {icon: 1});
                                            resolve()
                                        }
                                    });
                                })

                            }
                        })
                    }
                }
            });
            table.on('tool(link)', function (obj) {
                var event = obj.event;
                if (event === 'edit') {
                    x_admin_show('编辑', `./info.html?video_detail_id=${obj.data.video_detail_id}&video_id=${obj.data.video_id}&video_name=${obj.data.video_name}&sort=${obj.data.sort}&id=${obj.data.id}`, 1100, 700);
                } else if (event === 'collection') {
                    ChangeAjax('/cps/link/collection', { id: obj.data.id }, 'link')
                } else if (event === 'link_switch') {
                    let { id, video_id, video_detail_id, media_id, is_open, echo_rate, advertiser_id, link_switch, rebate, } = obj.data
                    link_switch = link_switch === 0 ? 1 : 0
                    ChangeAjax('/cps/link/switchLink', {
                        id:id
                    }, 'link')
                } else if (event === 'detail') {
                    x_admin_show('订单详情', `../order/index.html?link_id=${obj.data.id}`, 1100, 700, null);
                } else if (event === 'history') {
                    x_admin_show('历史数据', `../order/history.html?link_id=${obj.data.id}`, 1100, 700, null);
                } else if (event === 'LTV') {
                    x_admin_show('LTV统计', `../order/daily.html?link_id=${obj.data.id}&is_distributor=${obj.data.is_distributor}`, 1200, 600, null);
                }else if(event==='edithuichuang'){
                    x_admin_show('回传率', `./hcInfo.html?link_id=${obj.data.id}&id=${obj.data.id}`, 600, 300);
                }
            });
            table.on('edit(link)', function (obj) {
                var field = obj.field //得到字段
                    , value = obj.value //得到修改后的值
                    , data = obj.data; //得到所在行所有键值
                var update = {};
                if (!isNaN(Number(value))) {
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                    let { video_id, video_detail_id, media_id, is_open, echo_rate, id, advertiser_id, link_switch, rebate } = data
                    Ajax('/cps/link/edit', {
                        video_id, video_detail_id, media_id, is_open, echo_rate, id, advertiser_id, link_switch, rebate
                    }).then(result => {
                        table.reloadData('link')
                    });
                } else {
                    table.reloadData('linkList')
                    layer.msg('请输入数字', {
                        icon: 5
                    })
                }
            });
            element.on('tab(changeType)', function (data) {
                if (data.index === 1) {
                    params.url = '/cps/link/list?is_collection=1'
                } else {
                    params.url = '/cps/link/list'
                }
                tableList(params)
            });
            layui.laydate.render({
                elem: '#start_date'
            });
        });

        let selectParams = {
            url: '/cps/video/select',
            selected: [],
            tips: '选择短剧',
            name: 'video_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pMenu'
        }
        selectN(selectParams)

        if (is_distributor === 1) {
            $("#pitcher").show()
        }
    </script>
</body>

</html>